<template>
  <div class="login">
    <div class="info">
      <span style="margin-right:10px;margin-top:10px">登录:</span>
      <el-input
        v-model="form.username"
        style="width:300px"
      ></el-input>
    </div>
    <div class="info">
      <span style="margin-right:10px;margin-top:10px">密码:</span>
      <el-input
        v-model="form.password"
        style="width:300px"
      ></el-input>
    </div>
    <el-button @click="login()">登录</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      this.$store.dispatch('user/login', this.form)
        .then(() => {
          this.$router.push({ path: '/home' })
        })
        .catch(() => {

        })
    }
  }
}
</script>
<style scoped>
.login {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  margin:0 auto;
  margin-top: 50vh;
  transform: translateY(-50%);
  width: 500px;
  height: 300px;
  border: 1px solid red;
}
.info{
  display: flex;
}
</style>
